import Vue from 'vue'
// import App from './App.vue'
import App from '@/App'//@是一个别名，是一个小名， 代表就是我们的src路径
import router from '@/router'
import store from '@/store'
// import {default as store} from '@/store'//详细写法
import '@/mock/mockServer'  //引入mockServer，让模拟的接口生效
import 'swiper/css/swiper.css'//引入swiper的css
import * as API from '@/api'//直接获取接口请求函数的文件暴露对象
import '@/utils/validate'  //引入vee-validate相关配置


import { Button,MessageBox,Message,Input } from 'element-ui';


//图片懒加载
import VueLazyload from 'vue-lazyload'
import loading from '@/assets/images/loading.gif'
// 在图片界面没有进入到可视范围前不加载, 在没有得到图片前先显示loading图片
Vue.use(VueLazyload, { // 内部自定义了一个指令lazy
  loading,  // 指定未加载得到图片之前的loading图片
})
//element-ui当中分为两种组件
// 第一种组件就和下面这个Button一样，可以引入然后全局注册,使用的时候直接写标签
// Vue.use(Button)
Vue.component(Button.name,Button)
Vue.component(Input.name,Input)
// 第二种组件就和MessageBox类似，引入之后不能直接注册，而是挂载Vue的原型上使用，使用的时候写的js代码
// Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$message = Message;  //用来做提示消息，比alert要好看



// import '@/api'//这种方法会解析整个index
// 只引入这个函数，判断是否错误（第二种方法，只用加载一小部分数据）
// import {reqCategoryList} from '@/api'
// reqCategoryList()

import TypeNav from '@/components/TypeNav'
import SlideLoop from '@/components/SlideLoop'
import Pagination from '@/components/Pagination'


// 全局注册的组件，如果一个非路由组件被多个组件使用，那么定义在components，注册在全局
Vue.component('TypeNav',TypeNav)
Vue.component('SlideLoop',SlideLoop)
Vue.component('Pagination',Pagination)



Vue.config.productionTip = false

new Vue({
  beforeCreate() {
    Vue.prototype.$bus=this  //安装总线  代表任意组件内部都可以通过this.$bus访问到vm实例（总线）
    Vue.prototype.$API = API

  },
  el:'#app',
  render: h => h(App),
  router, //把路由器对象挂到Vue的配置对象上，我们所有的组件内部都可以使用this.$router和this.$route
  store,   //注册上我们所有的组件都可以拿到this.$store
})

